<template>
	<view class="header">
		<van-tabs v-model="active" animated title-active-color="#00C5C1"  nav-class="tabs">
			<!-- 预约订单 -->
			<van-tab title="预约订单" tab-class="van-tab" title-style="font-size:32rpx">
				<bookingOrder></bookingOrder>
			</van-tab>

			<!-- 确认订单 -->
			<van-tab title="确认订单" title-style="font-size:32rpx">
				
				<orderConfirmation></orderConfirmation>
			</van-tab>

			<!-- 完成订单 -->
			<van-tab title="完成订单" title-style="font-size:32rpx">
				<completeOrder></completeOrder>
			</van-tab>
		</van-tabs>
			<!-- <view class="model"></view> -->
			<!-- //确认遮挡层 -->
		<uni-popup type="bottom" ref="confirmation">
			<view class="confirmation_cont">
				<view class="top">更多选择</view>
				<view class="bot">
					<view  v-for="(item,index) in conList " :key="index" :class="{'public':indx==index,'active_c':true}">{{item}}</view>
					
				</view>
				
			</view>
		</uni-popup>
		
		<!-- //私领TA遮挡层 -->
		<uni-popup type="center" ref="silin">
			<view class="silin_cont">
				<view class="title">私领TA</view>
				<view class="shure">确定要添加TA到顾客管理？</view>
				<view class="btn">
					<view @click="ccancel()">取消</view>
					<view class="ok" @click="determine()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 星星点评 -->
		<uni-popup type="bottom" ref='xingxing'>
			<view class="xin">
				<view class="title">星级点评</view>
				<view class="ract">
					<uni-rate :size="18" :value="5" :margin="20" active-color='#00C6C2' color='#8A8A8A' @change="onChange" v-model='value'/>
				</view>
				<view class="pinjia">{{name}}</view>
				<view class="listXin">
					<view v-for="(item,index) in textList" :key='index' :class="{actived:arr.includes(item)}" @click="checkedBox(item)">{{item}}</view>
					
				</view>
				<view class="btn_ni" @click="submit">匿名提交</view>
			</view>
		</uni-popup>
		<!-- //订单取消 -->
		<uni-popup type="bottom" ref='cancel'>
			<view class="quxiao">
				<view class="title">取消订单</view>
				<view class="text1">取消订单将会影响个人信誉排名</view>
				<view class="text2">注：每日拒绝超过2次，平台将限制其未来24小时内不能再接单.</view>
				<view class="btn">
					<view class="cancel" @click="can">取消</view>
					<view class="quedin" @click="jieOk">确定</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import bookingOrder from './componets/bookingOrder.vue'
	import orderConfirmation from './componets/orderConfirmation.vue'
	import completeOrder from './componets/completeOrder.vue'
	export default{
		data(){
			return{
				active: 2,
				indx:0,
				conList:['修改时间','电话联系','取消订单'],
				textList:['沟通顺畅','态度友好','支付及时','准时到店'],
				value:5,
				c_data:'',//确认订单的遮挡层
				attitude:[
					{
					attitude_text:'差',
					attitude_infor:['沟通不流畅','态度不友好','支付不及时','未准时到店']
				},
				{
					attitude_text:'一般',
					attitude_infor:['沟通不流畅','态度不友好','支付不及时','未准时到店']
				},
				{
					attitude_text:'好',
					attitude_infor:['沟通顺畅','态度友好','支付及时','准时到店']
				},
				{
					attitude_text:'很好',
					attitude_infor:['沟通顺畅','态度友好','支付及时','准时到店']
				},
				{
					attitude_text:'非常好',
					attitude_infor:['沟通顺畅','态度友好','支付及时','准时到店']
				},
				],
				name:'非常好',
				arr:[]
			}
		},
		components:{
			bookingOrder,
			orderConfirmation,
			completeOrder
		},
		methods:{
			//点击确定
			determine(){
				this.$refs.silin.close()
			},
			//点击取消
			ccancel(){
				this.$refs.silin.close()
			},
			//接单取消
			can(){
				this.$refs.cancel.close()
			},
			//接单确定
			jieOk(){
				this.$refs.cancel.close()
			},
			//点击匿名提交
			submit(){
				uni.showToast({
					title:'功能开发中',
					icon:'none'
				})
				uni.$emit('ok_xin',{
					status:true
				})
			},
			onChange(e){
				console.log(e)
				
				
				this.name = this.attitude[e.value-1].attitude_text
				this.textList = this.attitude[e.value-1].attitude_infor
			},
			//多选
			checkedBox(index){
				
				            if(this.arr.includes(index)){
				                //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
				                //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
				                this.arr=this.arr.filter(function (ele){return ele != index;});
				            }else{
				                this.arr.push(index);
				            }
				        console.log(this.arr)
			}
		},
		created() {
			//确认订单
			uni.$on('confirmation',data=>{
				// console.log(data)
				if(data.show===true){
					 this.$refs.confirmation.open()
				}
			})
			//私领TA
			uni.$on('silin',data=>{
				if(data.show===true){
					 this.$refs.silin.open()
				}
			})
			//星星
			uni.$on('xin',data=>{
				if(data.show===true){
					 this.$refs.xingxing.open()
				}
			})
			//取消
			uni.$on('cancel',data=>{
				if(data.show===true){
					 this.$refs.cancel.open()
				}
			})
		}
	}
</script>

<style>
	@import './order.css';

</style>
<style scoped lang="less">
	//确认订单的遮挡层
	.confirmation_cont{
		width: 100%;
		height: 800rpx;
		background: white;		
		.top{
			height: 100rpx;
			border-bottom: 1rpx #E0E0E0 solid;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			line-height: 30rpx;
			text-align: center;
			line-height:100rpx ;
		}
		.bot{
			// padding: 25rpx 25rpx;
			
			.public{
				margin: 50rpx auto;
				width: 649rpx;
				height: 77rpx;
			
				border: 1rpx solid #414141 !important;
				border-radius: 38rpx;
				text-align: center;
				line-height: 77rpx;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #414141!important;
			}
			.active_c{
				
				margin: 50rpx auto;
				width: 649rpx;
				height: 77rpx;			
				border: 1rpx solid #9B9B9B;
				border-radius: 38px;
				border-radius: 38rpx;
				text-align: center;
				line-height: 77rpx;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #9B9B9B;
			}
		}
	}
	
	//完成私领
	.silin_cont{
		width: 665rpx;
		height: 377rpx;
		background: #F9F9F9;
		border-radius: 4rpx;
		background: white;
		.title{
		
			font-size: 40rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			text-align: center;
			line-height: 98rpx;
		}
		.shure{
			text-align: center;
			
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #282828;
			line-height: 100rpx;
		}
		.btn{
			display: flex;
			justify-content: space-around;
			view{
				width: 209rpx;
				height: 90rpx;
				border: 1rpx solid #00C6C2;
				border-radius: 4rpx;
				text-align: center;
				line-height: 90rpx;
				
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #00C6C2;
			}
			.ok{
				background: #00C6C2;
				
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	//星星点评
	.xin{
		width: 100%;
		height: 800rpx;
		background: white;
		.title{
			height: 100rpx;
			border-bottom: 1rpx #E0E0E0 solid;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			line-height: 30rpx;
			text-align: center;
			line-height:100rpx ;
		}
		.ract{
			// border:  1px solid red;
			width: 390rpx;
			// height: 100rpx;
			margin: 50rpx auto;
		}
		.pinjia{
			// width: 110rpx;
			text-align: center;
			height: 25rpx;
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #333333;
			line-height: 30rpx;
			// margin: 0 auto;
		}
		.listXin{
			margin: 30rpx auto;
			width: 390rpx;
			height: 150rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;			
			view{
				width: 171rpx;
				height: 50rpx;
				border: 1rpx solid #979797;
				border-radius: 4rpx;
				display: inline-block;
				text-align: center;
				line-height: 50rpx;				
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #414141;
			}
			.actived{
				border: 1rpx solid #00C6C2 !important;
				color: #00C6C2 !important;
			}
		}
		.btn_ni{
			width: 390rpx;
			height: 72rpx;
			background: #414141;
			border-radius: 4rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 72rpx;			
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	//取消
	.quxiao{
		width: 100%;
		height: 800rpx;
		background: white;
		text-align: center;
		.title{
			height: 100rpx;
			border-bottom: 1rpx #E0E0E0 solid;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			line-height: 30rpx;
			text-align: center;
			line-height:100rpx ;
		}
		.text1{
			margin-top: 49rpx;
			margin-bottom: 49rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
		}
		.text2{
			width: 445rpx;
			height: 59rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #515151;
			line-height: 36rpx;
			margin: 0 auto;
			margin-bottom: 49rpx;
		}
		.btn{
			margin: 0 auto;
			width: 452rpx;
			height: 67rpx;
			display: flex;
			justify-content: space-between;
			.cancel{
				width: 227rpx;
				height: 67rpx;
				background: #00C6C2;
				text-align: center;
				line-height: 67rpx;
				border: 1rpx solid #A5A0A0;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
			}
			.quedin{
				width: 227rpx;
				height: 67rpx;
				border: 1rpx solid #A5A0A0;
				line-height: 67rpx;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #414141;
			}
		}
	}
</style>
